import React, { Component } from 'react'
import { Form, Input, Button, Checkbox, Card, message } from 'antd'
import { UserOutlined, LockOutlined } from '@ant-design/icons'
import './css/login.less'
import { reqLogin } from '../../api'
import {saveUserInfo} from '../../redux/actions_creators/login.js'
import {Redirect} from 'react-router-dom'
import {connect} from 'react-redux'
@connect(
  state => ({userInfo: state.userInfo}),
  {
    saveUserInfo: saveUserInfo
  }
)
class Login extends Component {
  onFinish = async (values) => {
    const {username, password} = values
    const res = await reqLogin(username, password)
    if (res.data.status !== 0) {
      return message.warning(res.data.msg)
    } else {
      this.props.history.push('/admin')
      // 保存数据到redux
      this.props.saveUserInfo({user:res.data.data, token:res.data.data._id})
    }
  }
  render() {
    if (this.props.userInfo.isLogin) {
      return (
        <Redirect to="/admin/home"></Redirect>
      )
    }
    return (
      <div className="login">
        <header className="login-header">
          <h1>React后台管理系统</h1>
        </header>
        <Card className="login-card" title="用户登录" bordered>
          <Form
            name="normal_login"
            className="login-form"
            initialValues={{
              remember: true,
            }}
            onFinish={this.onFinish}
          >
            <Form.Item
              name="username"
              rules={[
                {
                  required: true,
                  message: '请输入用户名',
                },
                {
                  pattern: /^\w+$/,
                  message: '用户名只能输入数字密码下划线'
                },
              ]}
            >
              <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="用户名" />
            </Form.Item>
            <Form.Item
              name="password"
              rules={[
                {
                  required: true,
                  message: '请输入密码',
                },
                {
                  min: 4,
                  max: 12,
                  message: '请输入4~12位的密码'
                }
              ]}
            >
              <Input
                prefix={<LockOutlined className="site-form-item-icon" />}
                type="password"
                placeholder="密码"
              />
            </Form.Item>
            <Form.Item>
              <Button type="primary" htmlType="submit" className="login-form-button">
                登录
              </Button>
            </Form.Item>
            <Form.Item>
              <Form.Item name="remember" valuePropName="checked" noStyle>
                <Checkbox>记住我</Checkbox>
              </Form.Item>
              {/* eslint-disable-next-line */}
              <a className="login-form-forgot" href="">
                忘记密码？
              </a>
            </Form.Item>
          </Form>
        </Card>
      </div>
    )
  }
}

export default Login
// 高阶函数：如果函数返回一个函数或者参数是函数则这个函数是高阶函数。promise、定时器、数组遍历方法、bind、Form.create()。好处是更加动态，更具扩展性
// 组件的本质：函数
// 高阶组件：一个组件接收一个组件，加工生成一个新组件则这个组件是高阶组件Form.create()(组件)、withRouter(组件)、connect()(组件)。好处是复用组件逻辑。
// 高阶组件 是一个特殊的高阶函数